<template>
  <div class="msite_shop_list">
    <div class="shop_container">
      <ul class="shop_list" v-if="shopList.length>0">
        <li class="shop_li border-1px"
            v-cloak v-for="shop of shopList"
            :key="shop.id"
            @click="$router.push('./shop')"
        >
          <a>
            <div class="shop_left">
             <!-- <img class="shop_img" :src="baseImgUrl + shop.image_path">-->
              <img class="shop_img" src="static/images/s1.jpg"/>
            </div>
            <div class="shop_right">
              <section class="shop_detail_header">
                <h4 class="shop_title ellipsis">{{shop.name}}</h4>
                <ul class="shop_detail_ul">
                  <li class="supports"   v-for="(support, index) of shop.supports" :key="index">
                    <span :style="{'color': '#' + support.icon_color}">
                       {{support.icon_name}}
                    </span>
                  </li>
                </ul>
              </section>
              <section class="shop_rating_order">
                <section class="shop_rating_order_left">
                  <star :score="shop.rating" :size="24" />
                  <div class="rating_section">
                    {{shop.rating}}
                  </div>
                  <div class="order_section">
                    月售{{shop.recent_order_num}}单
                  </div>
                </section>
                <section class="shop_rating_order_right">
                  <span class="delivery_style delivery_right">百度专送</span>
                </section>
              </section>
              <section class="shop_distance">
                <p class="shop_delivery_msg" style="display: inline-block">
                  <span>¥{{shop.float_minimum_order_amount}}起送</span>
                  <span class="segmentation">/</span>
                  <span >配送费约¥{{shop.float_delivery_fee}}</span>
                </p>
                <p class="shop_delivery_msg" style="float: right;display: inline-block;margin-right: -10px">
                  <span>{{shop.distance}}</span>
                  <span class="segmentation">/</span>
                  <span >{{shop.order_lead_time}}</span>
                </p>
              </section>
            </div>
          </a>
        </li>
      </ul>
      <ul v-else>
        <li v-for="(item, index) of 6" :key="index">
          <img src="static/images/shop_back.svg" alt="back"/>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import {mapState} from 'vuex'
import Star from '../star/Star'
export default {
  name: 'ShopList',
  components: {Star},
  data () {
    return {
      baseImgUrl: 'http://cangdu.org:8001/img/'
    }
  },
  computed: {
    ...mapState(['shopList'])
  }
}
</script>

<style lang="stylus" scoped>
  @import "../../common/stylus/mixins.styl"
  @import "../../common/stylus/share.styl"
  .msite_shop_list
    margin-bottom 100px
  .shop_container
    .shop_list
      .shop_li:last-child
       /* border-bottom 0*/
      .shop_li
        padding 10px 0
        border-bottom 1px solid lightblue
        width 100%
        >a
          clearFix()
          display block
          box-sizing border-box
          padding 15px
          width 100%
          .shop_left
            float left
            box-sizing border-box
            width 24%
            height 140px
            padding-right 20px
            .shop_img
              display block
              width 100%
              height 100%
          .shop_right
            float right
            width 76%
            .shop_detail_header
              clearFix()
              width 100%
              .shop_title
                float left
                width 400px
                color #333
                font-size 32px
                line-height 32px
                font-weight 700
                ellipsis()
                &::before
                  content '品牌'
                  display inline-block
                  font-size 22px
                  line-height 22px
                  color #333
                  background-color #ffd930
                  padding 4px
                  border-radius 4px
                  margin-right 10px
              .shop_detail_ul
                float right
                margin-top 6px
                .supports
                  float left
                  font-size 20px
                  border 1px solid #f1f1f1
                  padding 0 4px
                  border-radius 4px
            .shop_rating_order
              clearFix()
              width 100%
              margin-top 36px
              margin-bottom 16px
              .shop_rating_order_left
                float left
                color #ff9a0d
                width 60%
                .rating_section
                  float left
                  font-size 20px
                  color #ff6000
                  margin-left 8px
                .order_section
                  float left
                  font-size 20px
                  color #666
                  transform scale(.8)
              .shop_rating_order_right
                float right
                .delivery_style
                  transform-origin 70px 0
                  transform scale(.7)
                  display inline-block
                  font-size 24px
                  padding 2px
                  border-radius 4px
                .delivery_left
                  color #fff
                  margin-right -20px
                  background-color #02a774
                  border 2px solid #02a774
                .delivery_right
                  color #02a774
                  border 2px solid #02a774
                  font-size 25px
                  padding 4px
            .shop_distance
              clearFix()
              width 100%
              font-size 24px
              .shop_delivery_msg
                float left
                transform-origin 0
                transform scale(.9)
                color #666
              .segmentation
                color #ccc
</style>
